//router模块，这个文件需要引入到 main.js中
// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

//导入要用的组件
import MyHome from "@/components/MyHome.vue";
import MyMovie from "@/components/MyMovie.vue";
import MyMusic from "@/components/MyMusic.vue";
import MyAbout from '@/components/MyAbout.vue'
//导入子组件
import AboutMe from "@/components/AboutMe.vue";
import AboutYou from '@/components/AboutYou.vue'
//导入错误提示组件
import NotFound from '@/components/NotFound.vue'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter({

  /*一会要写路由的配置*/
  routes: [
    //重定向，当访问 / 的时候，将hash地址转到 /home（打开网站，自定默认打开的就是这个）
    { path: '/', redirect: '/home' },
    { path: '/home', component: MyHome },
    { path: '/movie', component: MyMovie },
    { path: '/music', component: MyMusic },
    {
      path: '/about', component: MyAbout,
      children: [
        // 这个里面写子组件里面的路由事件（嵌套路由）
        //children 里面的path就不用写 / 了 因为它上一级地址最后自带一个/
        { path: '/', redirect: '/about/me' },//重定向，当访问 / 的时候，将hash地址转到 /home
        { path: 'me', component: AboutMe },
        { path: 'you', component: AboutYou }
      ]
    },
    //访问错误（如错误状态码404），进入错误提示组件
    { path: '*', component: NotFound }
  ]
})

// 4. 导出路由的实例对象
export default router